$bg-color: #E1E1E1;
$myBlue: #206499;
$myDarkBlue: #092236;
$font-color: #FFFFFF;
$dropdown-color: #A5A7A8;
$dropdown-lightColor: #C3C5C7;

* {
	margin: 0;
}

body {
	background-attachment: fixed;
	background-color: $bg-color;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.8em;
	width: 100%;
	#main_header{
		position: relative;  
		height: 80px;
		background-color: $myBlue;
		background: -webkit-gradient(linear, 0 0, 0 100%, from($myBlue),  color-stop(99%, $myDarkBlue));

		#backGenresArrow.hidden{
			display:none;
		}
		#backDetailsArrow.hidden{
			display:none;
		}

		#backSearchArrow.hidden{
			display:none;
		}

		p {
			margin-top: 13px;
			font-size: 25px;
		}

		#logo{
			height: 80px;
			background-image: url("../images/netflics-logo.png");
			background-size: auto 100%;
			background-repeat: no-repeat;
			margin: 0 37%;
			width: 375px;
		}				

		#backGenresArrow {
		    left: 30px;
			top: 6px;
			position: absolute;
			background-repeat: repeat-x;
			background-color: #4A6C9B;
			background-image: -webkit-linear-gradient(bottom, transparent 0%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 100%);
			height: 60px;
			padding: 0 45px 0 43px;
			z-index: 0;
			border-radius: 6px;
			-webkit-border-top-left-radius: 10px 15px;
			-webkit-border-bottom-left-radius: 10px 15px;
			border-bottom: 1px solid rgba(255, 255, 255, 0.3);
			box-shadow: -1px -1px 0px rgba(0, 0, 0, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.8) inset;
			font-size: 11px;
			text-align: center;
			color: white;
			text-shadow: 0px -1px 0px black;
			line-height: 30px;
			font-family: HelveticaNeue;
			font-weight: 700;
			-webkit-background-size: 59px;
		}

		#backGenresArrow:before{
 			position: absolute;
			top: 9.9%;
			left: -15px;
			-webkit-background-size: 44px 44px;
			background-position: -2px -1.5px;
			background-color: #4A6C9B;
			background-image: -webkit-gradient(linear, left bottom, right top, from(transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0.3)));
			height: 50px;
			width: 50px;
			-webkit-transform: rotate(-45deg) skew(-10deg, -10deg);
			-webkit-border-top-right-radius: 100px 40px;
			-webkit-border-top-left-radius: 30px 2px;
			-webkit-border-bottom-right-radius: 2px 30px;
			-webkit-border-bottom-left-radius: 40px 100px;
			z-index: 1;
			content: ' ';
			border-left: 1.5px solid rgba(255, 255, 255, 0.3);
			box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2) inset, -1px 1px 1px rgba(0, 0, 0, 0.5) inset;
			-webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(black), color-stop(0.33, black), color-stop(0.5, transparent), to(transparent));
		}

		#backDetailsArrow{
		    left: 30px;
			top: 6px;
			position: absolute;
			background-repeat: repeat-x;
			background-color: #4A6C9B;
			background-image: -webkit-linear-gradient(bottom, transparent 0%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 100%);
			height: 60px;
			padding: 0 45px 0 43px;
			z-index: 0;
			border-radius: 6px;
			-webkit-border-top-left-radius: 10px 15px;
			-webkit-border-bottom-left-radius: 10px 15px;
			border-bottom: 1px solid rgba(255, 255, 255, 0.3);
			box-shadow: -1px -1px 0px rgba(0, 0, 0, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.8) inset;
			font-size: 11px;
			text-align: center;
			color: white;
			text-shadow: 0px -1px 0px black;
			line-height: 30px;
			font-family: HelveticaNeue;
			font-weight: 700;
			-webkit-background-size: 59px;
		}

		#backDetailsArrow:before{
 			position: absolute;
			top: 9.9%;
			left: -15px;
			-webkit-background-size: 44px 44px;
			background-position: -2px -1.5px;
			background-color: #4A6C9B;
			background-image: -webkit-gradient(linear, left bottom, right top, from(transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0.3)));
			height: 50px;
			width: 50px;
			-webkit-transform: rotate(-45deg) skew(-10deg, -10deg);
			-webkit-border-top-right-radius: 100px 40px;
			-webkit-border-top-left-radius: 30px 2px;
			-webkit-border-bottom-right-radius: 2px 30px;
			-webkit-border-bottom-left-radius: 40px 100px;
			z-index: 1;
			content: ' ';
			border-left: 1.5px solid rgba(255, 255, 255, 0.3);
			box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2) inset, -1px 1px 1px rgba(0, 0, 0, 0.5) inset;
			-webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(black), color-stop(0.33, black), color-stop(0.5, transparent), to(transparent));
		}

		#backSearchArrow {
		    right: 30px;
			top: 6px;
			position: absolute;
			background-repeat: repeat-x;
			background-color: #4A6C9B;
			background-image: -webkit-linear-gradient(bottom, transparent 0%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 100%);
			height: 60px;
			padding: 0 45px 0 43px;
			z-index: 0;
			border-radius: 6px;
			-webkit-border-top-right-radius: 10px 15px;
			-webkit-border-bottom-right-radius: 10px 15px;
			border-bottom: 1px solid rgba(255, 255, 255, 0.3);
			box-shadow: -1px -1px 0px rgba(0, 0, 0, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.8) inset;
			font-size: 11px;
			text-align: center;
			color: white;
			text-shadow: 0px -1px 0px black;
			line-height: 30px;
			font-family: HelveticaNeue;
			font-weight: 700;
			-webkit-background-size: 59px;
		}

		#backSearchArrow:before{
 			position: absolute;
			top: 9.9%;
			right: -15px;
			-webkit-background-size: 44px 44px;
			background-position: -2px -1.5px;
			background-color: #4A6C9B;
			background-image: -webkit-gradient(linear, right top, left bottom, from(transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0.3)));
			height: 50px;
			width: 50px;
			-webkit-transform: rotate(135deg) skew(-10deg, -10deg);
			-webkit-border-top-right-radius: 100px 40px;
			-webkit-border-top-left-radius: 30px 2px;
			-webkit-border-bottom-right-radius: 2px 30px;
			-webkit-border-bottom-left-radius: 40px 100px;
			z-index: 1;
			content: ' ';
			border-left: 1.5px solid rgba(255, 255, 255, 0.3);
			box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2) inset, -1px 1px 1px rgba(0, 0, 0, 0.5) inset;
			-webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(black), color-stop(0.33, black), color-stop(0.5, transparent), to(transparent));
		}

		#searchImage{
			height: 64px;
			width: 64px;
			background-image: url("../../images/search.png");
			position: absolute;
    		right: 8px;
    		top: 8px;
		}
	}

	#content{		
		overflow:hidden;
		-webkit-box-shadow: 0 0 2px 2px #ccc;
		box-shadow: 0 0 2px 2px #ccc;
		min-height:100%;
		width: 100%;
		padding-top: 1em;
		padding-bottom: 10px;

		.contentWrapper{			
			position:relative; 
			left:0; 
			width:6000px; 
			height:1200px;

		}

		.hidden{
			display: none;
		}
		
		.contentBox{
			width:960px; 
			height:100%; 
			float:left; 
			padding:10px;
		}

		#movieDetails{
			h2{
				text-align: center;
			}
			
			img{
				float: left;
				margin-right: 15px;
			}
			
			p{
				float: left;
			}
		}

		#searchPage{
			margin: 0 auto;
			text-align: center;

			p{
				text-align: left;
			}
			#searchType{
				background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.16, rgb(207,207,207)), color-stop(0.79, rgb(252,252,252)));
				width: auto;
				font-size: 0.8em;
				border: 1px solid #ccc;
				height: 34px;
				direction:rtl;
				margin-bottom: 3%;
			}
			
			#searchField{
				height: 34px;
				font-size: 0.8em;
				width: 80.5%
			}
			
			#searchButton{
				font-size: 0.7em;
				height: 24px;
			}

			#searchAgainButton{
				text-align: center;
				font-size: 0.7em;
				height: 24px;
				margin: 0 auto;
				margin-top: 2%;
				margin-bottom: 2%;
			}
			
			#searchAgainButton.hidden{
				display:none;
			}
		}

		#trailerButton{
				text-align: center;
				font-size: 0.7em;
				height: 35px;
				width:100%;
				margin: 0 auto;
				margin-top: 2%;
				margin-bottom: 2%;
			}
		#trailerImage{
			text-align: center;
			margin: 0 auto;
		}
	}

	.jcarousel-skin-tango{
		margin-bottom: 1em;
	}
	
	#login_content{
		background-color: $myBlue;
		background: -webkit-gradient(linear, 0 0, 0 100%, from($myBlue),  color-stop(99%, $myDarkBlue));
		height: 100%;
		color: $font-color;

		#floater {
		    float: left;
		    height: 25%;
		    width: 100%;
		    margin-bottom: -50px;
			margin: 0px auto;
			margin-top: auto;		    
		}

		#login_logo{
			text-align: center;
			clear: both;
			height: 150px;
			background-image: url("../images/netflics-logo.png");
			background-position:center;
			background-size: auto 150px;
			background-repeat: no-repeat;
		}					

		#login-box {
			clear: both;
			width: 220px;
			min-height: 100px;
			background-color: rgba(0, 0, 0, 0.8);
			border-radius: 10px;
			padding: 10px;
			margin: 0px auto;
			margin-top: auto;
			font-size: 0.6em;
		}

		.fb-login-button {
			width: 145px;
			height: 22px;
			margin-top: 15px;
			margin-left: 6px;
			overflow: hidden;
			text-align: center;
		}

		#userMessage{
			text-align: center;
		}
	}

	#footer {
		clear: both;
		color: #FFFFFF;
		width: 100%;
		height: 3em;
		bottom: 0;
		font-size: 12px;
		text-align: center;
		background-color: #000;
		padding-top: 20px;
		padding-bottom: 10px;
		position: relative;
		z-index: 10;
		margin-top: 0.2em;	
	}

}
